<template>
	<view class="index">
		<view class="main f-1 f16 pb40 f-y-bt">
			<u-tabs :list="list1" @click="handTabs" :current="current" lineColor="#FDDA34"
				:activeStyle="{fontWeight: 'bold',color:'#000'}"></u-tabs>
			<view class="uni-container mt20 f-g-1 f-y-bt">
				<uni-table ref="table" :loading="tbloading" border stripe emptyText="暂无明细"
					v-if="queryForm.groupBySpec=='carts'">
					<uni-tr>
						<uni-th align="center">ID</uni-th>
						<uni-th align="center">商品类别</uni-th>
						<uni-th align="center">商品销量</uni-th>
						<uni-th align="center">商品销售额</uni-th>
						<uni-th align="center">商品实收</uni-th>
					</uni-tr>
					<uni-tr v-for="(row, i) in dataList" :key="i">
						<uni-td align="center">{{ row.id}}</uni-td>
						<uni-td align="center">{{ row.name}}</uni-td>
						<uni-td align="center">{{ row.sales }}</uni-td>
						<uni-td align="center">{{ row.sellMoney }}</uni-td>
						<uni-td align="center">{{ row.money }}</uni-td>
					</uni-tr>
				</uni-table>
				<uni-table ref="table" :loading="tbloading" border stripe emptyText="暂无明细" v-else>
					<uni-tr>
						<uni-th align="center">ID</uni-th>
						<uni-th align="center">商品类别</uni-th>
						<uni-th align="center">商品名称</uni-th>
						<uni-th align="center" v-if="queryForm.groupBySpec=='specMd5'">规格值</uni-th>
						<uni-th align="center">商品销量</uni-th>
						<uni-th align="center">商品销售额</uni-th>
						<uni-th align="center">商品实收</uni-th>
					</uni-tr>
					<uni-tr v-for="(row, i) in dataList" :key="i">
						<uni-td align="center">{{ row.id }}</uni-td>
						<uni-td align="center">{{ row.goodsCat && row.goodsCat.length && row.goodsCat[0].name || '' }}</uni-td>
						<uni-td align="center">{{ row.name }}</uni-td>
						<uni-td align="center"
							v-if="queryForm.groupBySpec=='specMd5'">{{ row.attrData && row.attrData.spec }}</uni-td>
						<uni-td align="center">{{ row.num }}</uni-td>
						<uni-td align="center">{{ row.sellMoney }}</uni-td>
						<uni-td align="center">{{ row.money }}</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="queryForm.pageSize"
						:current="queryForm.pageNo" :total="total" @change="change" /></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				tab: 0,
				tabs: [{
						name: '今日',
						value: 2,
					},
					{
						name: '昨日',
						value: -1,
					},
					{
						name: '7日内',
						value: 7,
					},
					{
						name: '15日内',
						value: 15,
					},
					{
						name: '30日内',
						value: 30,
					},
					{
						name: '自定义',
						value: 1,
					}
				],
				tbloading: false,
				time: [],
				queryForm: {
					timeType: 2,
					scene: '',
					pageNo: 1,
					pageSize: 10,
					groupBySpec: 'spuId',
				},
				total: 0,
				channels: [{
						value: '',
						text: '全部类型'
					},
					{
						value: 1,
						text: '外卖'
					},
					{
						value: 2,
						text: '自提'
					},
					{
						value: 3,
						text: '店内'
					}
				],
				classfiys: [{
						value: '',
						text: '全部方式'
					},
					{
						value: 'wexin',
						text: '微信支付'
					},
					{
						value: 'ali',
						text: '支付宝支付'
					},
					{
						value: 'balance',
						text: '余额支付'
					},
					{
						value: 'cash',
						text: '现金支付'
					},
				],
				dataList: [],
				list1: [{
						name: '商品',
						value: 'spuId',
					},
					{
						name: '商品+规格',
						value: 'specMd5',
					},
					// {
					// 	name: '商品规格',
					// 	value: 'specMd5',
					// }, 
					{
						name: '商品类别',
						value: 'carts',
					}
				],
				current: 0,
				apiGoods: 'goodsScs',
				showCalendar: false,
				calendar: {
					minDate: '',
					maxDate: '',
					defaultDate: '',
					monthNum: 13,
				},
			}
		},
		methods: {
			async fetchData(q) {
				if (q.startTime && q.endTime) {
					this.queryForm.startTime = q.startTime
					this.queryForm.endTime = q.endTime
					this.queryForm.timeType = 1
				} else {
					this.queryForm.timeType = q.timeType
				}
				this.tbloading = true
				const {
					data: {
						list,
						pageNo,
						pageSize,
						total
					},
				} = await this.beg.request({
					url: `${this.api[this.apiGoods]}`,
					data: this.queryForm
				})
				this.dataList = list ? list : []
				this.total = total
				this.queryForm.pageNo = pageNo
				this.queryForm.pageSize = pageSize
				this.tbloading = false
			},
			changeTab(v, i) {
				this.queryForm.pageNo = 1
				this.tab = i
				this.queryForm.timeType = v.value
				if (v.value == 1) return this.showCalendar = true
				this.queryForm.startTime = ''
				this.queryForm.endTime = ''
				this.fetchData(this.queryForm)
			},
			handDiningType(e) {
				this.queryForm.pageNo = 1
				this.queryForm.scene = e
				this.fetchData(this.queryForm)
			},
			handTabs(e) {
				this.queryForm.pageNo = 1
				this.queryForm.groupBySpec = e.value
				this.current = e.index
				if (e.value == 'carts') {
					this.apiGoods = 'goodsCat'
				} else {
					this.apiGoods = 'goodsScs'
				}
				this.fetchData(this.queryForm)
			},
			change(e) {
				this.queryForm.pageNo = e.current;
				this.fetchData(this.queryForm)
			},
			confirm(e) {
				if (e && e.length) {
					this.time[0] = e[0]
					this.time[1] = e[e.length - 1]
				}
				this.queryForm.startTime = this.time[0]
				this.queryForm.endTime = this.time[1]
				this.fetchData(this.queryForm)
				this.showCalendar = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.t-l {
		text-align: left;
	}

	/deep/.current-index-text {
		color: #FD8906 !important;
	}
</style>